import { FadeIn } from '@/components/Animation';
import { homeDigitalImgs } from '@/utils';

export default function DigitalMod({ isPc }: any) {
  const BigImg = ({ url, direction = 'right' }: any) => (
    <>
      <div className="dmimgw center">
        {/* <FadeIn direction={direction}> */}
        <FadeIn direction={`${isPc ? direction : 'up'}`}>
          <img src={url} alt="" />
        </FadeIn>
      </div>
    </>
  );

  return (
    <div className="homeDigitalMod">
      <div className="mainWidth pagecon">
        <div className="con ">
          <div className="trow">
            <BigImg url={homeDigitalImgs[0]} direction="right" />
            <div className="rcon">
              <FadeIn direction={`${isPc ? 'left' : 'up'}`}>
                <div className="tit bold">
                  🧠 AI-Powered Defect
                  <span className="color-blue "> Detection</span>
                </div>
                <div className="dmtxts">
                  <div className="txt">
                    Detect hotspots, cracks, shading, corrosion, and more using enhanced DJX powered
                    AI engine dual-modality analysis. High precision with over 98% mAP and
                    customizable confidence thresholds.
                  </div>
                </div>
              </FadeIn>
            </div>
          </div>

          <div className="trow">
            {!isPc && <BigImg url={homeDigitalImgs[1]} direction="left" />}
            <div className="rcon">
              <FadeIn direction={`${isPc ? 'right' : 'up'}`}>
                <div className="tit bold">
                  📍 GPS-Accurate
                  <span className="color-blue "> Mapping</span>
                </div>
                <div className="dmtxts">
                  <div className="txt">
                    Every defect is geotagged and displayed on an interactive map, enabling
                    historical comparisons, heatmap visualization, and one-click navigation for
                    field teams.
                  </div>
                </div>
              </FadeIn>
            </div>
            {isPc && <BigImg url={homeDigitalImgs[1]} direction="left" />}
          </div>

          <div className="trow">
            <BigImg url={homeDigitalImgs[2]} direction="right" />
            <div className="rcon">
              <FadeIn direction={`${isPc ? 'left' : 'up'}`}>
                <div className="tit bold">
                  📊 Digital Twin &<span className="color-blue "> Asset Traceability</span>
                </div>
                <div className="dmtxts">
                  <div className="txt">
                    Assign each panel a unique ID. Track its installation, inspection, maintenance,
                    and defect history. Make your solar farm fully transparent and traceable.
                  </div>
                </div>
              </FadeIn>
            </div>
          </div>

          <div className="trow">
            {!isPc && <BigImg url={homeDigitalImgs[3]} direction="left" />}
            <div className="rcon">
              <FadeIn direction={`${isPc ? 'right' : 'up'}`}>
                <div className="tit bold">
                  🖥️ Cloud + Edge
                  <span className="color-blue "> Deployment</span>
                </div>
                <div className="dmtxts">
                  <div className="txt">
                    Run AI predictions locally using edge GPU workstations (e.g. RTX 4090/5090) for
                    real-time inference and efficient post-processing.
                  </div>
                  <div className="txt">
                    Integrate with DJI Dock for <strong>automated flight missions—upload</strong> IR
                    & visual data immediately after landing, and receive defect reports in minutes.
                  </div>
                  <div className="txt">
                    All results are synchronized to the cloud for long-term monitoring, KPI
                    analytics, and cross-site asset comparison.
                  </div>
                </div>
              </FadeIn>
            </div>
            {isPc && <BigImg url={homeDigitalImgs[3]} direction="left" />}
          </div>

          <div className="trow">
            <BigImg url={homeDigitalImgs[4]} direction="right" />
            <div className="rcon">
              <FadeIn direction={`${isPc ? 'left' : 'up'}`}>
                <div className="tit bold">📱 Cross-Platform Support</div>
                <div className="dmtxts">
                  <div className="txt">
                    Access your data anytime via Web Dashboard (React-based), iOS/Android apps
                    (Flutter or native). Mobile apps support GPS-guided inspection and direct photo
                    uploads.
                  </div>
                </div>
              </FadeIn>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
